<template>
  <el-dialog :model-value="dialogData.isShow" :title="dialogData.id?'编辑':'新增'"
              @close="closeDialog" draggable>
    <el-form :model="form" ref="formRef" :rules="rules" label-width="110px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="轮播图类型" prop="type">
            <el-select v-model="form.type" clearable placeholder="请选择轮播图类型" disabled>
              <el-option :value="1" label="信息轮播图"/>
              <el-option :value="2" label="广告轮播图"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="轮播图名称" prop="name">
          <el-input v-model="form.name" maxlength="32" placeholder="请输入轮播图名称"/>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="文章" prop="jumpBusinessId">
            <!-- <el-input type="number" v-model="form.jumpBusinessId" placeholder="请输入跳转到业务ID"/> -->
            <!-- <el-select v-model="form.jumpBusinessId" clearable placeholder="请选择轮播图类型" style="width: 240px">
              <el-option v-for="item in articleList" :key="item.id" :value="item.id" :label="item.title"/>
            </el-select> -->
            <el-input v-model="form.jumpBusinessId" maxlength="32" placeholder="请输入输入业务ID"/>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="跳转类型" prop="jumpType">
            <el-select v-model="form.jumpType" clearable placeholder="请选择跳转类型">
              <el-option :value="1" label="不跳转"/>
              <el-option :value="2" label="跳转到业务详情"/>
              <el-option :value="3" label="其他"/>
            </el-select>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="轮播图图片" prop="imageUrl">
            <Upload v-model:value="form.imageUrl" type="image"
                    :customStyle="{'width':'120px','height':'120px'}"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
 
<script setup lang="ts">
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {addSysBanner, getSysBanner, updateSysBanner} from "@/api/app/sysBanner";
import {getArticlePage} from '@/api/app/article';
 
const formRef = ref<FormInstance>()
 
const emits = defineEmits<{
  (event: 'refresh'): void
}>()
 
// 表单
let form: any = ref({
  id: null,
  type: 1,
  name: null,
  imageUrl: null,
  jumpType: 2,
  jumpBusinessId: null,
});
 
// 效验规则
const rules = reactive<FormRules>({
  type: [
    {required: true, message: '请选择轮播图类型', trigger: 'blur'},
  ],
  name: [
    {required: true, message: '请输入轮播图名称', trigger: 'blur'},
  ],
  imageUrl: [
    {required: true, message: '请输入轮播图图片路径', trigger: 'blur'},
  ],
  jumpBusinessId: [
    {required: true, message: '请输入业务ID', trigger: 'blur'},
  ],
  jumpType: [
    {required: true, message: '请选择跳转类型', trigger: 'blur'},
  ],
})
 
// 获取详情
const getDetails = (id: string) => {
  getSysBanner(id).then(res => {
    form.value = Object.assign({}, form.value, res);
  })
}
 
// 弹框数据
const dialogData = reactive({
  isShow: false,
  id: null
})
 
// 打开弹框
const openDialog = async (id: string) => {
  dialogData.isShow = true;
  dialogData.title = '新增系统轮播图';
  console.log(id, 'id')
  if (id) {
    dialogData.id = id;
    dialogData.title = '编辑系统轮播图';
    getDetails(id);
  }
  getArticlePageData()
}
 
// 关闭弹框
const closeDialog = () => {
  dialogData.isShow = false;
  form.value = {
    type: 1
  };
}
// 提交
 
const submit = async () => {
  if (!formRef.value) return;
    await formRef.value.validate((valid: any) => {
    if (valid) {
      let data = form.value;
      if (data.id) {
        updateSysBanner({...data}).then(() => {
          ElMessage.success('操作成功');
          closeDialog();
          emits('refresh');
        })
      } else {
        addSysBanner({...data}).then(() => {
          ElMessage.success('操作成功');
          closeDialog();
          emits('refresh');
        })
      }
    }
  })
}

const articleList = ref([])
const loading = ref(false)

const getArticlePageData = () => {
  // let params = {
  //     pageIndex: 1,
  //     pageSize: 99999999,
  // }
  // getArticlePage(params).then(res => {
  //   console.log(res, 'res')
  //   articleList.value = res.list
  // })
  // articleList
}

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      let params = {
        pageIndex: 1,
        pageSize: 99999999,
        keyword: query
      }
      getArticlePage(params).then(res => {
        console.log(res, 'res')
        loading.value = false
        articleList.value = res.list
      })
    }, 3000)
  } else {
    articleList.value = []
  }
}
defineExpose({
  openDialog,
});
</script>
 
<style scoped>
</style>

<style>
::v-deep .el-select-dropdown__wrap {
  width: 140px !important;
}
</style>